<template>
  <div class="page">
    <div class="products">
      <div class="type-list">
        <div :class="selectId === item.id ? 'select-type-item' : 'type-item'" v-for="(item, index) in typeList"
          :key="index" @click="onSelectMenu(item)">
          {{ item.name }}({{ item.number }})
        </div>
      </div>
      <div class="filter-container">
        <Orders :orderList="orderList" @changeOrders='onChangeOrders'></Orders>
        <span class="mr10">价格段</span>
        <a-input-number v-model:value="filterInfo.priceLow" addon-after="$" @change="onNewList"></a-input-number>
        <span class="ml10 mr10">-</span>
        <a-input-number v-model:value="filterInfo.priceHigh" addon-after="$" @change="onNewList"></a-input-number>
      </div>
      <div class="product-list" v-if="listData && listData.length > 0">
        <ProductDetail v-for="(item, index) in listData" :detail="item" :key="item.id"></ProductDetail>
      </div>
      <div class="data-empty-container" v-else>
        <img src="@i/data-empty.png" class="data-empty">
      </div>
      <Pagination style="padding-right: 20px;" v-if="pageInfo.total" :total="pageInfo.total"
        :page_no="pageInfo.pageNumber" @change="onPageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Orders from "@c/Orders/index.vue";
import Pagination from "@c/Pagination/index.vue";
import { getSubProductPage, getSubProductType } from '@r/api/userSub'
import ProductDetail from '@c/productDetail/index.vue'
let listData = ref<any[]>([])
let typeList = ref<any[]>([])
const selectId = ref<number | undefined>(0)
let orderList = [{
  key: 'sales',
  label: '商品销量'
}, {
  key: 'up.created_time',
  label: '关注时间'
}, {
  key: 'price',
  label: '商品价格'
},
]
let orders = ref<{
  isDescending: boolean
  propertyName?: string
}>({
  isDescending: true,
  propertyName: ''
})
const selectLevel = ref<number | undefined>(undefined)
const pageInfo = ref({
  pageSize: 50,
  pageNumber: 1,
  total: 0
})
const filterInfo = ref({
  priceLow: undefined,
  priceHigh: undefined
})
const fieldNames = { children: 'sons', title: 'newName', key: 'id' }

onMounted(() => {
  getList()
  getTypeList()
})
function getTypeList() {
  getSubProductType({}).then((res: any) => {
    console.log(res);
    let total = 0
    res = res.map((item: any) => {
      total = total + item.number
      return item
    })
    typeList.value = [{
      id: 0,
      name: '全部',
      number: total
    }, ...res]
    // console.log(listData.value);
  })
}
function onChangeOrders(res: any) {
  console.log(res);
  orders.value = res
  onNewList()
}
function getList() {
  getSubProductPage({
    typeId: selectId.value === 0 ? undefined : selectId.value,
    ...pageInfo.value,
    ...filterInfo.value,
    orders: orders.value.propertyName ? orders.value : undefined

  }).then((res: any) => {
    console.log(res);
    if (res) {
      res.items = newNameFunc(res.items)
      listData.value = res.items.map((item: any) => {
        item.collect = true
        return item
      })
      pageInfo.value.total = res.count;
    }
  })
}
function onPageChange({
  page_no,
  page_size,
}: {
  page_no: number;
  page_size: number;
}) {
  pageInfo.value.pageNumber = page_no;
  pageInfo.value.pageSize = page_size;
  getList();
}
function onNewList() {
  pageInfo.value.pageNumber = 1
  getList()
}
function onSelectMenu(item: any) {
  if (selectId.value === item.id) {
    return
  }
  selectId.value = item.id
  // selectLevel.value = item.level
  onNewList()
  console.log(item, 1111);
}
function newNameFunc(res: any[]) {
  res = res.map((item: any) => {
    item.newName = `${item.name}(${item.enName})`
    if (item.sons && item.sons.length > 0) {
      item.sons = newNameFunc(item.sons)
    }
    return item
  })
  // console.log(res);
  return res
}
</script>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 200px);
  // height: 100%;
  // overflow-y: auto;
}

.products {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  // margin: 10px 0 0 10px;
  // padding: 0px 0 0 20px;
  flex: 1;
}

.type-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  .type-item {
    height: 32px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: #F7F9FA;
    color: #252931;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
    margin-bottom: 4px;
  }

  .select-type-item {
    height: 32px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: #FFEBDD;
    color: #FF6923;
    font-size: 14px;
    margin-right: 10px;
    margin-bottom: 4px;
  }
}

.filter-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  letter-spacing: 0em;
  color: #666666;
  margin: 10px 0;
}

.product-list {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  overflow-y: auto;
}

.data-empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.data-empty {
  height: 112px;
  width: 200px;
}
</style>